<template>
    <view>
		<view>
			<u-search
				input-align="center"
				height="70" 
				placeholder="搜索姓名、班级、公司、行业" 
				v-model="keyword" 
				action-text="搜索" 
				:animation="true" 
				search-icon-color="#999999"
				@custom="searchHistory()"
				margin="30rpx 20rpx"
				>
			
			</u-search>
		</view>
		
		<u-back-top
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				:icon-style="iconStyle" 
				bottom="200" 
				:custom-style="customStyle" 
				tips="顶部" 
				top="1500">
		</u-back-top>	
				
		<!-- 校友列表 -->
		<view class="content" style="background-color: #f2f2f2;">
		
			<view class="center_box_bg" v-if="contentList" v-for="item in contentList" :key="item.id">
				<view class="profily" @click="user_info(item.openId)">
					<view class="base">
						<!-- 头像 -->
						<div>
							<!-- <image class="image" :src="item.headUrl"></image> -->
							<u-avatar v-if="item.sex==0" :src="item.headUrl" mode="circle" size='large' show-sex='true' sex-icon='woman'></u-avatar>
							<u-avatar v-else :src="item.headUrl" mode="circle" size='large' show-sex='true' sex-icon='man'></u-avatar>
						</div>
						<!-- 信息 -->
						<div style="margin-top: 10px;">
							<view>
								<text class="text1">{{item.realName}}</text>
								<text class="text2">{{item.majorClass}}</text>
								<text class="text2">{{item.liveCity.split('-')[0]}}</text>
							</view>
							
							<view style="margin-top: 20rpx;">
								<text class="text3">{{item.enterTime}}-{{item.graduateTime}}</text>
								<text class="text3" style="margin-left: 15rpx;">{{item.educationBackgroundName}}</text>
							</view>
							<view style="margin-top: 5rpx;">
								<text class="text3">{{item.workUnit}}</text>
								<text class="text3" style="margin-left: 15rpx;">{{item.position}}</text>
							</view>
							<view style="margin-top: 5rpx;">
								<text class="text3">{{item.occupationalName}}</text>
							</view>	
							
							<view class="text3">
								<!-- {{ $u.timeFrom(item.lastLoginTime, false) }} -->
								{{ getGraceDateBeforeNow(item.lastLoginTime) }} 活跃
							</view>
						</div>
						
					</view>			
				</view>
			</view>
			
			<!-- 到底了 -->
			<view v-if="contentList != null" style="display: flex; background-color: #f2f2f2;">
				<view class="" style="background: #c3c3c3; width: 150px; height: 3rpx; margin-top: 20px; margin-left: 28px;"></view>
				<view style="margin-top: 10px; margin-left: 5px; margin-right: 5px;">到底了</view>
				<view class="" style="background: #c3c3c3; width: 150px; height: 3rpx; margin-top: 20px;"></view>
			</view>
		</view>
		
		
			
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '',
				keyword: '',
				/* 返回顶部 */
				scrollTop: 0,
				customStyle:{
					backgroundColor: '#a0cfff',
					color: '#2979ff'
				},
				iconStyle: {
 					color: '#2979ff',
 					fontSize: '34rpx'
 				},
				
				contentList: [
					/* {
						id: '',
						username: '',
						sex: '',
						identity: '',
						birthday: '',
						liveCity: '',
						nativePlace: '',
						majorClass: '',
						enterTime: '',
						graduateTime: '',
						educationBackground: '',
						occupationalId: '',
						occupationalDescription: '',
						workUnit: '',
						position: '',
						phone: '',
						wechat: '',
						email: '',
						qq: '',
						showInformation: '',
						headUrl: '',
						openId: '',
						occupational: ''
					}
 */
				],
				url: ''
            }
        }, 
        onLoad(data) {
			this.url = data.url
			console.log("this.url",this.url);
			this.getData();
        },
        methods: {
			async searchHistory(value){
				const params = {
					keyWord: value
				} 
				// value自动接收输入框中的内容
				if (value == ''){
					//如果输入的值为空则加载所有的列表
					this.getData();
				}else {
					//先清空展示的数据
					this.contentList = [];
					//然后赋值数据
					console.log(params.keyword);
					await this.$u.api.userSelect(params).then(res =>  {
						if(res.code!="200") {
							uni.showToast({
								icon:"none",
								title:"获取失败，请重试"
							})
						} else {
							 this.contentList = res.data
						}
					})
				}
			},
			// 时间显示优化 刚刚、几分钟前，几小时前，几个月前
			getGraceDateBeforeNow(dateTimeStr) {
				return getApp().getDateBeforeNow(dateTimeStr);
			},
			//获取数据
			async getData(){
				// this.loading = true //显示骨架屏
	
				let data = await this.$u.api.faceSearch(this.url)
				console.log("data.data++++++", data.data);
				
				// setTimeout(() => {
				// 	this.loading = false;
				// }, 2000)
				
				this.contentList = data.data
			},
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			user_info(openId) {
				uni.navigateTo({
					url: "/pages/seach/seach_info?id=" + openId,
				});
			}
			
        }
    }
</script>

<style lang="scss">
	
	.warp {
		padding: 10px;
	}
	.content {
	    height:100vh;
		background-color: #f2f2f2;
	}
	.center_box_bg {
		background-color: #f2f2f2;
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 150px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding-left: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px #bebebe;
		}
	}
	.base {
		display: flex;
		// justify-content: space-between;//两端对齐
		// flex-wrap: wrap;//自动换行
		align-items: center;
		// border-bottom: 2px solid #F6F6F6; //下划线
		padding-bottom: 35upx;
		position: relative;
	/* 	.profily_header {
			height: 120upx;
			width: 120upx;
			background-image: url('../../static/my/header.jpg');
			background-size: 100%;
		} */
	
		/* text {
			margin-left: 20px;
			font-size: 30upx;
		} */
		
		.image {
			height: 120upx;
			width: 120upx;
			background-size: 100%;
			border-radius: 50px;
		}
		
		.text1 {
			margin-left: 50rpx;
			font-size: medium;
			font-weight: 600;
		}
		.text2 {
			font-size: 14px;
			margin-left: 20rpx;
			color: #193867;
		}
		.text3 {
			margin-top: 20rpx;
			margin-left: 50rpx;
			font-size: 13px;
			color: #cccccc;
		}
	
	}
	.button {
		background-color: #193867;
		margin-top: 16px;
		margin-right: 10px;
		color:white;
		width: 100px;
		height: 34px;
		border:0;
		font-size: 25rpx;
		color: #f2f2f2;
		border-radius: 30px;
	}
	.class {
		width: 300px;
	}
	
</style>